<!DOCTYPE html>
<html lang="ru" xml:lang="ru">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Farado</title>

  <link href="/static/bootstrap/css/bootstrap.min.css" rel="stylesheet">
  <link href="/static/css/login.css" rel="stylesheet">
</head>

<body class="text-center">

  <main class="form-login">
    <form action="/" method="post">
      <h3 class="h3 mb-3 fw-normal">Смените пароль</h3>
      <p>Срок действия вашего пароля истек или администратор требует, чтобы вы его изменили.</p>

      <div class="form-floating">
        <input
            type="password"
            name="new_password"
            class="form-control"
            id="inputPassword"
            placeholder="Пароль"
            required
            autofocus>
        <label for="inputPassword">Пароль</label>
      </div>

      <div class="form-floating">
        <input
            type="password"
            class="form-control"
            id="inputConfirmPassword"
            placeholder="Пароль"
            required>
        <label for="inputConfirmPassword">Подтвердите пароль</label>
        <span class="badge bg-warning text-dark" id="confirmPasswordMessage"></span>
      </div>

      <button
          id="saveButton"
          class="w-100 btn btn-outline-primary mt-3"
          type="submit">
        Сохранить
      </button>
    </form>
  </main>
</body>

<script src="/static/js/jquery-3.6.0.min.js"></script>
<script src="/static/bootstrap/js/bootstrap.bundle.min.js"></script>
<script>
  $('#inputPassword, #inputConfirmPassword').on('keyup', function () {
    if ($('#inputPassword').val() == $('#inputConfirmPassword').val()) {
      $('#confirmPasswordMessage').html('');
      $('#saveButton').prop('disabled', false);
    } else {
      $('#confirmPasswordMessage').html('Пароли не совпадают');
      $('#saveButton').prop('disabled', true);
    }
  });
</script>

</html>
